<template>
  <div class="pdv-9 pdh-4">
    <div class="input-row-wrap">
      <div class="name"><i class="required color-red">*</i>预约日期：</div>
      <input
        placeholder="请选择预约日期"
        v-model="form.yuyueDate"
        disabled
        type="text"
      />
    </div>

    <div class="input-row-wrap">
      <div class="name"><i class="required color-red">*</i>您的手机号：</div>
      <input
        placeholder="请输入手机号"
        v-model="form.mobile"
        disabled
        type="text"
      />
    </div>

    <div class="input-row-wrap">
      <div class="name">备注说明：</div>
      <textarea
        placeholder="请输入备注说明"
        v-model="form.note"
        disabled
        name
        cols="20"
        rows="5"
      ></textarea>
    </div>

    <!-- <p class="tips">
      <span>提示：可在2020-09-12 中午12点进行撤销，</span
      >请确认好，以免降低您的信用值影响您的下一次兑换。
    </p> -->

    <p class="tips"><span>提示：</span>商家已确认，可在{{laterTime}}18点前撤销。</p>

    <div
      class="default-block-btn "
      v-preventReClick="1000"
      :class="[chexiao == true?'':'default-disabled']"
      @click="withdraw($event)"
    >
      申请撤销
    </div>

    <dialogMore :title="'申请撤销'" ref="dialog">
      <section>
        <section class>
          <div class="input-row-wrap">
            <div class="name"><i class="required color-red">*</i>理由：</div>
            <cube-radio-group
              v-model="withdrawForm.ly"
              :options="typeOptions"
              :col-num="1"
            />
          </div>

          <div class="input-row-wrap">
            <div class="name">备注：</div>
            <textarea
              placeholder="请输入说明"
              v-model="withdrawForm.sm"
              name
              cols="20"
              rows="5"
            ></textarea>
          </div>

          <!-- <p class="tips">
            <span>提示：可在预约时间前24小时内撤销，预约时间为2020-09-12，</span
            >截止目前已超过撤销时限，很抱歉！
          </p> -->

          <div
            :class="['default-block-btn', { 'default-disabled': isSucceed }]"
            v-preventReClick="1000"
            @click="submit($event)"
          >
            提交
          </div>
        </section>
      </section>
    </dialogMore>
  </div>
</template>

<script>
import tools from "@/utils/tools";
import api from "@/common/config/api";
import loginService from "@/service/loginService";
import moment from "moment";
import dialogMore from "../../../../components/layout/dialogMore.vue";
export default {
  name: "merchantConfirm",
  components: { dialogMore },
  props: ["jlyyTime","chexiao"],
  data() {
    return {
      tabIndex: 0,
      title: "",
      content: "",
      userInfo: {},
      laterTime:'',//最迟取消预约时间
      orderInfo: JSON.parse(sessionStorage.getItem("orderInfo")), //订单信息
      orderDetail: JSON.parse(sessionStorage.getItem("orderDetail")), //订单详细信息(包含预约记录)
      // productDetail: JSON.parse(sessionStorage.getItem("productDetail")), //商品详细信息
      datePicker: null,
      isSucceed: false, //立即兑换是否调用成功
      form: {
        // 预约form
        mobile: "",
        note: "",
        orderId: "",
        yuYueDate: "",
      },
      withdrawForm: {
        // 取消form
        ly: "",
        sm: "",
      },
      typeOptions: [
        {
          label: "临时有事",
          value: 1,
        },
        {
          label: "突然不想去了",
          value: 2,
        },
        {
          label: "天气不好",
          value: 3,
        },
        {
          label: "其他",
          value: 4,
        },
      ],
    };
  },
  created() {
    this.form = this.orderDetail.yuyueRecords[0];
    this.form.yuyueDate = moment(this.form.yuyueDate).format(
      "YYYY-MM-DD"
    );
    this.userInfo = this.$localStorage.get("userInfo");
    this.laterTime = new Date(this.form.yuyueDate);
    this.laterTime = moment(new Date(this.laterTime.setDate(this.laterTime.getDate() - 1))).format(
      "YYYY年MM月DD日"
    );
  },
  methods: {
    // 点击申请撤销
    withdraw(e) {
      if (e.target.disabled) {
        return false;
      }
      this.$refs.dialog.show();
    },
    // 提交
    submit(e) {
      if (e.target.disabled) {
        return false;
      }
      /*
      if (this.withdrawForm.ly === "") {
        return tools.tip("请选择预约日期！");
      }
      if (this.withdrawForm.ms === "") {
        return tools.tip("请填写手机号！");
      } */

      // this.$emit("merchantSuccess"); //临时跳过
      var data = {
        orderId: this.orderInfo.id,
        yuYueRecordId: this.form.id,
      };
      this.fetchService.mallOrderCancelYuyue(data).then((res) => {
        if (res.code !== 0) {
          return tools.tip(res.message);
        }
        this.isSucceed = true;
        this.$refs.dialog.back();
        tools.tip("撤回成功！");
        setTimeout(() => {
          tools.back(); //返回上一步
        }, 2000);
      });
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/common/stylus/moon.scss";
.tips {
  font-size: $tipFontSize;
  color: #e20002;
  line-height: 41px;
  > span {
    color: #343434;
  }
}
.default-disabled {
  background: #c6c6c6;
  -webkit-box-shadow: none;
  box-shadow: none;
  pointer-events: none;
}
</style>
